<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>登录</title>

<meta name="description" content="User login page" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="author" content="">

<link rel="stylesheet" href="../css/bootstrap.css" />
<link rel="stylesheet" href="../css/font-awesome.css" />
<link rel="stylesheet" href="../css/ace.css" />
<link rel="stylesheet" href="../css/ace-rtl.css" />
</head>

<body class="login-layout light-login">
	<div class="main-container">
		<div class="main-content">
			<div class="row">
				<div class="col-sm-10 col-sm-offset-1">
					<div class="login-container">
						<div class="center">
							<h1>
								<i><img alt="" src="../images/longsheng.jpeg" width="30px" height="33px"></i> <span class="red">华集</span>
								<span class="grey" id="id-text2">后台管理</span>
							</h1>
						</div>

						<div class="space-6"></div>

						<div class="position-relative">
							<div id="login-box"
								class="login-box visible widget-box no-border">
								<div class="widget-body">
									<div class="widget-main">
										<h4 class="header blue lighter bigger">
											<i class="ace-icon fa fa-coffee green"></i> 请输入你的账号和密码
										</h4>

										<div class="space-6"></div>

										<form>
											<fieldset>
												<label class="block clearfix"> <span
													class="block input-icon input-icon-right"> <input
														type="text" class="form-control span12" id="username"
														placeholder="输入账号" maxlength="16"><i
														class="ace-icon fa fa-user"></i>
												</span>
												</label> <label class="block clearfix"> <span
													class="block input-icon input-icon-right"> <input
														type="password" class="form-control span12" id="pwd"
														placeholder="输入密码" maxlength="8"> <span id="info"
														style="color: red;"></span> <i class="ace-icon fa fa-lock"></i>
												</span>
												</label>

												<div class="space"></div>

												<div class="clearfix">
													<button type="button" id="login"
														class="width-35 pull-right btn btn-sm btn-primary">
														<i class="ace-icon fa fa-key"></i> <span
															class="bigger-110">登录</span>
													</button>
												</div>

												<div class="space-4"></div>
											</fieldset>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="../js/jquery.js"></script>
	<script src="../js/ace/jquery.mobile.custom.js"></script>

	<script type="text/javascript">
		$(function() {
			//按钮事件
			$("#login").click(function() {
				var uname = $("#username").val();
				var pwd = $("#pwd").val();
				$.ajax({
					type : 'post',
					url : '/HuaJi/login',
					dataType : 'json',
					data : {
						username : uname,
						pwd : pwd
					},
					beforeSend : validteForm,
					success : function(data) {
						if (data.data == "success") {
							window.location = "/HuaJi/user/list";
						} else {
							$("#info").html("账号或密码错误");
						}
					}
				});
			});

			function validteForm() {
				if ($("#username").val() == null || $("#username").val() == "") {
					$("#info").html("账号不能为空");
					return false;
				} else {
					$("#info").html("");
				}

				if ($("#pwd").val() == null || $("#pwd").val() == "") {
					$("#info").html("密码不能为空");
					return false;
				} else {
					$("#info").html("");
				}
				return true;
			}

			//回车提交事件
			$(window).keydown(function(event) {
				if (event.keyCode == "13") {//keyCode=13是回车键
					$("#login").click();
				}
			});
		});
	</script>
</body>
</html>